<template>
  <div class="fullwidth-tool">
    <div class="tool-header">
      <h1>全角半角转换工具</h1>
      <p>快速进行全角半角字符转换</p>
    </div>

    <div class="tool-container">
      <el-row :gutter="20">
        <!-- 输入区域 -->
        <el-col :span="12">
          <div class="input-section">
            <div class="section-header">
              <h3>输入内容</h3>
              <div class="actions">
                <el-button @click="clearInput" size="small">清空</el-button>
                <el-button @click="pasteFromClipboard" size="small" type="primary">粘贴</el-button>
              </div>
            </div>
            
            <el-input
              v-model="inputText"
              type="textarea"
              :rows="8"
              placeholder="请输入要转换的文本..."
              @input="handleInput"
            />
            
            <div class="input-actions">
              <el-button 
                type="primary" 
                @click="toFullwidth"
                :disabled="!inputText.trim()"
                :loading="isProcessing"
              >
                <el-icon><Edit /></el-icon>
                转全角
              </el-button>
              <el-button 
                type="success" 
                @click="toHalfwidth"
                :disabled="!inputText.trim()"
                :loading="isProcessing"
              >
                <el-icon><Edit /></el-icon>
                转半角
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 输出区域 -->
        <el-col :span="12">
          <div class="output-section">
            <div class="section-header">
              <h3>转换结果</h3>
              <div class="actions">
                <el-button @click="copyResult" size="small" :disabled="!outputText">复制</el-button>
                <el-button @click="clearOutput" size="small">清空</el-button>
              </div>
            </div>
            
            <el-input
              v-model="outputText"
              type="textarea"
              :rows="8"
              placeholder="转换结果将显示在这里..."
              readonly
            />
            
            <div class="output-info" v-if="outputText">
              <el-tag type="info" size="small">
                长度: {{ outputText.length }} 字符
              </el-tag>
              <el-tag type="success" size="small" v-if="lastOperation">
                操作: {{ lastOperation }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 字符对照表 -->
      <div class="char-table">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>全角半角字符对照表</span>
            </div>
          </template>
          
          <div class="char-content">
            <div class="char-section">
              <h4>数字字符</h4>
              <div class="char-grid">
                <div class="char-item" v-for="i in 10" :key="i">
                  <span class="halfwidth">{{ i - 1 }}</span>
                  <span class="arrow">→</span>
                  <span class="fullwidth">{{ getFullwidthDigit(i - 1) }}</span>
                </div>
              </div>
            </div>
            
            <div class="char-section">
              <h4>英文字母</h4>
              <div class="char-grid">
                <div class="char-item" v-for="i in 26" :key="i">
                  <span class="halfwidth">{{ String.fromCharCode(65 + i - 1) }}</span>
                  <span class="arrow">→</span>
                  <span class="fullwidth">{{ getFullwidthLetter(65 + i - 1) }}</span>
                </div>
              </div>
            </div>
            
            <div class="char-section">
              <h4>标点符号</h4>
              <div class="char-grid">
                <div class="char-item" v-for="(symbol, index) in commonSymbols" :key="index">
                  <span class="halfwidth">{{ symbol.half }}</span>
                  <span class="arrow">→</span>
                  <span class="fullwidth">{{ symbol.full }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 使用说明 -->
      <div class="tool-info">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>使用说明</span>
            </div>
          </template>
          
          <div class="info-content">
            <h4>什么是全角半角？</h4>
            <p>全角和半角是字符显示宽度的概念，主要用于区分中英文输入法下的字符显示方式。</p>
            
            <h4>字符特点：</h4>
            <ul>
              <li><strong>半角字符：</strong>占用1个字符宽度，如英文字母、数字、标点符号</li>
              <li><strong>全角字符：</strong>占用2个字符宽度，如中文字符、全角标点符号</li>
              <li><strong>转换范围：</strong>主要针对ASCII字符与全角字符的相互转换</li>
            </ul>
            
            <h4>使用场景：</h4>
            <ul>
              <li>文档格式统一</li>
              <li>数据库数据处理</li>
              <li>文本排版调整</li>
              <li>系统兼容性处理</li>
              <li>输入法切换问题</li>
            </ul>
            
            <h4>转换规则：</h4>
            <div class="rules">
              <p><strong>半角转全角：</strong>ASCII字符 + 0xFEE0 = 全角字符</p>
              <p><strong>全角转半角：</strong>全角字符 - 0xFEE0 = ASCII字符</p>
              <p><strong>空格处理：</strong>半角空格(32) ↔ 全角空格(12288)</p>
            </div>
            
            <h4>示例：</h4>
            <div class="example">
              <p><strong>半角：</strong>Hello World! 123</p>
              <p><strong>全角：</strong>Ｈｅｌｌｏ　Ｗｏｒｌｄ！　１２３</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'

const inputText = ref('')
const outputText = ref('')
const isProcessing = ref(false)
const lastOperation = ref('')

// 常用标点符号对照
const commonSymbols = [
  { half: '!', full: '！' },
  { half: '"', full: '"' },
  { half: '#', full: '＃' },
  { half: '$', full: '＄' },
  { half: '%', full: '％' },
  { half: '&', full: '＆' },
  { half: "'", full: '' },
  { half: '(', full: '（' },
  { half: ')', full: '）' },
  { half: '*', full: '＊' },
  { half: '+', full: '＋' },
  { half: ',', full: '，' },
  { half: '-', full: '－' },
  { half: '.', full: '．' },
  { half: '/', full: '／' },
  { half: ':', full: '：' },
  { half: ';', full: '；' },
  { half: '<', full: '＜' },
  { half: '=', full: '＝' },
  { half: '>', full: '＞' },
  { half: '?', full: '？' },
  { half: '@', full: '＠' },
  { half: '[', full: '［' },
  { half: '\\', full: '＼' },
  { half: ']', full: '］' },
  { half: '^', full: '＾' },
  { half: '_', full: '＿' },
  { half: '`', full: '｀' },
  { half: '{', full: '｛' },
  { half: '|', full: '｜' },
  { half: '}', full: '｝' },
  { half: '~', full: '～' }
]

const handleInput = () => {
  // 输入变化时的处理逻辑
}

const toFullwidth = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入要转换的文本')
    return
  }
  
  isProcessing.value = true
  try {
    // 模拟处理延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    
    let result = ''
    for (let i = 0; i < inputText.value.length; i++) {
      const char = inputText.value[i]
      const charCode = char.charCodeAt(0)
      
      if (charCode === 32) {
        // 半角空格转全角空格
        result += String.fromCharCode(12288)
      } else if (charCode >= 33 && charCode <= 126) {
        // ASCII可打印字符转全角
        result += String.fromCharCode(charCode + 0xFEE0)
      } else {
        // 其他字符保持不变
        result += char
      }
    }
    
    outputText.value = result
    lastOperation.value = '转全角'
    ElMessage.success('全角转换完成')
  } catch (error) {
    ElMessage.error('转换失败：' + error.message)
  } finally {
    isProcessing.value = false
  }
}

const toHalfwidth = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入要转换的文本')
    return
  }
  
  isProcessing.value = true
  try {
    // 模拟处理延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    
    let result = ''
    for (let i = 0; i < inputText.value.length; i++) {
      const char = inputText.value[i]
      const charCode = char.charCodeAt(0)
      
      if (charCode === 12288) {
        // 全角空格转半角空格
        result += String.fromCharCode(32)
      } else if (charCode >= 0xFF01 && charCode <= 0xFF5E) {
        // 全角字符转半角
        result += String.fromCharCode(charCode - 0xFEE0)
      } else {
        // 其他字符保持不变
        result += char
      }
    }
    
    outputText.value = result
    lastOperation.value = '转半角'
    ElMessage.success('半角转换完成')
  } catch (error) {
    ElMessage.error('转换失败：' + error.message)
  } finally {
    isProcessing.value = false
  }
}

const getFullwidthDigit = (digit) => {
  return String.fromCharCode(digit + 0xFF10)
}

const getFullwidthLetter = (letterCode) => {
  return String.fromCharCode(letterCode + 0xFEE0)
}

const clearInput = () => {
  inputText.value = ''
  ElMessage.info('已清空输入内容')
}

const clearOutput = () => {
  outputText.value = ''
  lastOperation.value = ''
  ElMessage.info('已清空输出结果')
}

const copyResult = async () => {
  if (!outputText.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = outputText.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('已复制到剪贴板')
  }
}

const pasteFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText()
    inputText.value = text
    ElMessage.success('已粘贴内容')
  } catch (error) {
    ElMessage.error('无法访问剪贴板，请手动粘贴')
  }
}
</script>

<style scoped>
.fullwidth-tool {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tool-header {
  text-align: center;
  margin-bottom: 40px;
}

.tool-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.tool-header p {
  color: #666;
  font-size: 1.1rem;
}

.tool-container {
  margin-bottom: 40px;
}

.input-section,
.output-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.3rem;
}

.actions {
  display: flex;
  gap: 8px;
}

.input-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.output-info {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.char-table {
  margin: 40px 0;
}

.card-header {
  font-weight: bold;
  color: #333;
}

.char-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.char-section h4 {
  color: #333;
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  border-bottom: 2px solid #667eea;
  padding-bottom: 5px;
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.char-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  font-size: 0.9rem;
}

.halfwidth {
  font-family: 'Courier New', monospace;
  color: #333;
  font-weight: bold;
}

.arrow {
  color: #667eea;
  font-weight: bold;
  margin: 0 8px;
}

.fullwidth {
  font-family: 'Courier New', monospace;
  color: #667eea;
  font-weight: bold;
}

.tool-info {
  margin-top: 40px;
}

.info-content h4 {
  color: #333;
  margin: 20px 0 10px 0;
  font-size: 1.1rem;
}

.info-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.info-content ul {
  color: #666;
  padding-left: 20px;
  margin-bottom: 15px;
}

.info-content li {
  margin-bottom: 5px;
}

.rules {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  margin: 15px 0;
}

.rules p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
  color: #333;
}

.example {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.example p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
}

@media (max-width: 768px) {
  .tool-header h1 {
    font-size: 2rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .input-actions {
    flex-direction: column;
  }
  
  .output-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .char-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .char-item {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  
  .arrow {
    transform: rotate(90deg);
  }
}
</style>
